<template>
    <div class="content">
        <div class="login">
            <div><label for="">用户名：</label><input class="user" type="text"></div>
            <div><label for="">密码：</label><input type="text"></div>
            <div><input @click="login()" type="button" name="" id="" value="登录"></div>
            <td contentEditable="true">sss</td>
            <div class="msg">{{ msg }}</div>
            <div>qqq</div>
        </div>
        <test2 :title = 'title' @shijian='shijian'></test2>
    </div>
</template>

<script>
import test2 from './test2.vue'
export default {
    data(){
        return{
            msg:"你好",
            title:123
        }
    },
    components:{
        test2
    },
    methods:{
        login(){
            let e = document.querySelector(".user")
            let msg = e.value.trim()
            console.log(msg);
        },
        shijian(a,b,c,d){
            console.log(a,b,c,d);
        }
    },
    mounted(){
        
    }
}
</script>

<style lang='scss' scoped>
    .login{
        margin: 10px 50px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        // align-items: center;
        
        div{
            display: flex;
            flex:1;
            align-items: center;
            // justify-content: center;
            margin: 10px;
            label{
                width: 80px;
            }
        }
        .msg{
            color: red;
            position: relative;
        }
    }
</style>